<script>
export default {
  name: "MyNav",
  props: {
    title: {},
  },
  data() {
    return {
      message: "来自MyNav的消息",
    };
  },
  created() {
    this.$bus.$on("message-from-a", (msg) => {
      console.log("message-from-a", msg);
      this.message = msg;
    });
  },
  beforeDestroy() {
    // 防止内存泄漏，组件销毁时移除事件监听
    this.$bus.$off("message-from-a");
  },

  methods: {
    add() {
      console.log("add");
    },
    sendMessage() {
      console.log("sendMessage");
      // --事件总线的方式
      this.$bus.$emit("message-from-a", '发送消息到 MySilder');
      // --vuex发送
      //this.$store.dispatch("updateMessage", "Message from Child A");
    },
  },
};
</script>
<template>
  <div>
    <h3>{{ title }}</h3>
    <p>来自MySilder的消息: {{ message }}</p>
    <button @click="sendMessage">发送消息到 MySilder</button>
  </div>
</template>
